<!--人才标签弹出框 -->
<template>
  <a-modal
    :width="'60%'"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
    :mask-closable="false"
    title-align="center"
  >
    <template #title> 人才标签 </template>

    <div class="wrap">
      <div class="wrap-unused">
        <a-scrollbar style="height: 600px; overflow: auto">
          <a-space direction="vertical">
            <h3>可选标签</h3>
            <a-checkbox
              :model-value="checkedAll"
              :indeterminate="indeterminate"
              @change="handleChangeAll"
              >全选
            </a-checkbox>
            <div v-for="item in tagData" :key="item.id">
              <h3>{{ item.name }}</h3>
              <a-checkbox-group @change="onChange" v-model="selectedData">
                <a-checkbox
                  class="checkItem"
                  v-for="el in item.subTag"
                  :key="el.id"
                  :value="el.id"
                >
                  <span :title="el.name">
                    {{ el.name }}
                  </span>
                </a-checkbox>
              </a-checkbox-group>
            </div>
          </a-space>
        </a-scrollbar>
      </div>
    </div>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk" :loading="store.getIsLoading"
        >确定</a-button
      >
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, watch, watchEffect } from 'vue';
import { formHeaderSetting } from '@/types/global';
import useGlobalParametersStore from '@/store/modules/globalParameters';
import cloneDeep from 'lodash.clonedeep';
import { GetHumanLabel } from '@/apis/management/human/baseSetting/humanSetting';

const store = useGlobalParametersStore();
const props = withDefaults(
  // 参数说明
  defineProps<{
    visible: boolean; // 判断是否打开表头设置抽屉
    data?: any; // 传过来数据
  }>(),
  {
    visible: false
  }
);

let selectedData = ref([]); // 保存选中的数据
let tagData = ref([]); // 保存所有标签数据
let subTagData = ref([]); // 保存所有子标签数据
const checkedAll = ref(false); // 判断是否全选
const indeterminate = ref(false);
const getData = async () => {
  try {
    const { perTagTypeList } = await GetHumanLabel({});
    tagData.value = perTagTypeList;
    tagData.value.forEach((el: any) => {
      el.subTag.forEach((el2: any) => {
        subTagData.value.push(el2);
      });
    });
  } catch (error) {
    console.log(error);
  }
};

watch(
  () => props.visible,
  async (newVal: any) => {
    if (newVal) {
      await getData();
      selectedData.value = cloneDeep(props.data);
      isIndeterminate();
    }
  }
);

const emits = defineEmits(['update:visible', 'tagSave']);

// 全选事件
const handleChangeAll = (value: boolean) => {
  indeterminate.value = false;
  if (value) {
    checkedAll.value = true;
    selectedData.value = [];
    tagData.value.forEach((el: any) => {
      el.subTag.forEach((el2: any) => {
        selectedData.value.push(el2.id);
      });
    });
  } else {
    checkedAll.value = false;
    selectedData.value = [];
  }
};

// 点击非全选框时
const onChange = (val: any) => {
  isIndeterminate();
};

// 判断全选按钮的状态;
const isIndeterminate = () => {
  if (selectedData.value?.length === subTagData.value?.length) {
    checkedAll.value = true;
    indeterminate.value = false;
  } else if (selectedData.value?.length === 0) {
    checkedAll.value = false;
    indeterminate.value = false;
  } else {
    checkedAll.value = false;
    indeterminate.value = true;
  }
};
// 确认
const handleOk = () => {
  emits('tagSave', selectedData.value);
  emits('update:visible', false);
};

// 取消
const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.wrap {
  display: flex;
  justify-content: space-between;

  &-unused {
    flex: 4;
    border: 1px solid #ccc;
    margin-right: 10px;
    height: 600px;
    padding: 10px;

    // 六个字的宽度，如果超过则显示省略号
    .checkItem {
      display: inline-block;
      width: 8em; /* 六个字的宽度 */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &-used {
    flex: 2;
    border: 1px solid #ccc;
    padding: 10px;
    .draggable {
      &-selected {
        padding-bottom: 20px;

        .item {
          &-box {
            width: 100%;
            position: relative;
            &-container {
              // background-color: #f2f3f5;
              height: 50px;
              line-height: 50px;
            }
            &-container:hover {
              background-color: #f2f3f5;
            }
          }
        }
        .forbid {
          position: relative;
          width: 100%;
          height: 50px;
          line-height: 50px;
          // width: 100%;
        }
      }
      // &-unselected {
      //   .item {
      //     display: flex;
      //     flex-wrap: wrap;
      //     width: 100%;
      //     background-color: #4e5969;
      //     &-box {
      //       width: 100%;
      //       margin: 0 10px 10px 0;
      //       &-container {
      //         background-color: #f2f3f5;
      //       }
      //     }
      //   }
      // }
    }
  }
}
</style>
